<template>
  <base-page-view class-name="phone-container">
    <template v-if="handleType">
      <view class="sub-title">
        {{ subTitleObj[handleType] }}
        <view v-if="handleType !== 'verify'">当前手机号：<view class="old-mobile">{{ formData.mobile }}</view></view>
      </view>
      <view class="form-block">
        <view class="form-item" :class="{ focus: mobileFocus || handleType === 'verify' }">
          <view class="form-label">{{ handleType === 'verify' ?'原':'' }}手机号</view>
          <view class="form-content">
            <view v-if="handleType === 'verify'">{{ formData.mobile }}</view>
            <input v-else v-model="formData.new_mobile" type="number" :focus="mobileFocus" maxlength="11" placeholder-class="input-holder" :placeholder="handleType === 'verify'?'请输入当前的手机号':'请输入要更换的手机号'" @focus="mobileFocus = true" @blur="mobileFocus = false" />
          </view>
        </view>
        <view class="form-item" :class="{ focus: codeFocus }">
          <view class="form-label">验证码</view>
          <view class="form-content">
            <input v-if="handleType === 'verify'" v-model="formData.sms_code" type="number" :focus="codeFocus" maxlength="6" placeholder-class="input-holder" :placeholder="'请输入验证码'" @focus="codeFocus = true" @blur="codeFocus = false" />
            <input v-else v-model="formData.new_mobile_sms_code" type="number" :focus="codeFocus" maxlength="6" placeholder-class="input-holder" :placeholder="'请输入验证码'" @focus="codeFocus = true" @blur="codeFocus = false" />
          </view>
          <view class="form-btn" :class="{ normal: smsBtnTitle === '获取验证码', disable: smsBtnDisable }" @click.stop="getCode">{{ smsBtnTitle }}</view>
        </view>
        <view class="form-btn-item" :class="{ disable: btnDisable }" @click="save">{{ btnTitleObj[handleType] }}</view>
      </view>
    </template>
  </base-page-view>
</template>
<script>
import './index.scss'

const TitleObj = {
  verify: '验证本机号码',
  modify: '修改手机号码'
}
let timer = null
export default {
  name: 'PhoneHandle',
  data() {
    return {
      handleType: '', // 'verify': 验证手机号、‘modify': 更换手机号
      subTitleObj: Object.freeze({
        verify: '请先确认当前手机号码为本人使用',
        modify: '更换手机后，下次登录请使用新手机号登录。'
      }),
      btnTitleObj: Object.freeze({
        verify: '下一步',
        modify: '确定'
      }),
      smsBtnTitle: '获取验证码',
      mobileFocus: false,
      codeFocus: false,
      formData: {
        mobile: '',
        old_mobile: '',
        new_mobile: '',
        sms_code: '',
        new_mobile_sms_code: ''
      }
    }
  },
  computed: {
    smsBtnDisable: function() {
      let result = true
      const isMobile = this.formData.new_mobile.match(/^\d{11}$/)
      if (this.smsBtnTitle !== '获取验证码') {
        result = true
      } else if (this.handleType === 'verify') {
        result = false
      } else {
        result = !isMobile
      }
      return result
    },
    btnDisable: function() {
      let result = true
      const isMobile = this.formData.new_mobile.match(/^\d{11}$/)
      if (this.handleType === 'verify') {
        result = !(this.formData.sms_code && this.formData.sms_code.length === 6)
      } else {
        result = !(isMobile && this.formData.new_mobile_sms_code && this.formData.new_mobile_sms_code.length === 6)
      }
      return result
    }
  },
  onLoad(options) {
    clearInterval(timer)
    this.handleType = options.type || 'verify'
    this.$setNavTitle(TitleObj[this.handleType])
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await this.$api.mineApi.getMyInfo({ hideLoading: true })
      if (res.success && res.data) {
        const { mobile } = res.data
        this.formData.mobile = mobile
        this.formData.old_mobile = mobile
      }
    },
    async getCode() {
      if (!this.smsBtnDisable) {
        this.codeFocus = true
        const postData = { type: 2 }
        if (this.handleType === 'verify') {
          postData.mobile = this.formData.mobile
        } else {
          postData.mobile = this.formData.new_mobile
        }
        const res = await this.$api.mineApi.sendSms(postData)
        if (res.success) {
          uni.showToast({ title: '短信发送成功，请查收', icon: 'none' })
          let timeToend = 60
          this.smsBtnTitle = `${timeToend}s`
          clearInterval(timer)
          timer = setInterval(() => {
            timeToend--
            if (timeToend) {
              this.smsBtnTitle = `${timeToend}s`
            } else {
              clearInterval(timer)
              this.smsBtnTitle = '获取验证码'
            }
          }, 1000)
        }
      }
    },
    async save() {
      if (this.btnDisable) {
        return
      }
      let res
      if (this.handleType === 'verify') {
        res = await this.$api.mineApi.verifyMobile(this.formData)
        if (res.success) {
          this.$navigateTo('/pagesMine/phone/index?type=modify', {}, 'redirectTo')
        }
      } else {
        res = await this.$api.mineApi.changeMobile(this.formData)
        if (res.success) {
          setTimeout(() => {
            uni.showToast({ title: '手机号修改成功', icon: 'none', duration: 3500 })
          }, 100)
          uni.navigateBack()
        }
      }
    }
  }
}
</script>
